<template>
  <div class="classbox">
    <a-card title="文章列表" style="width: 100%">
      <a-button type="primary" slot="extra" @click="openmodal()">新增文章</a-button>
      <div class="class_table">
        <a-table
          :columns="columns"
          :rowKey="classList => classList.id"
          :dataSource="classList"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="active" slot-scope="row">
            <span class="goodsurl" @click="openmodal(row)">改</span>
            <a-popconfirm title="确定删除吗?" ok-text="删除" cancel-text="取消" @confirm="delArticle(row.id)">
              <span class="goodsurl quan">删</span>
            </a-popconfirm>
          </div>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getArticleList, delArticle } from '@/api/article'
// import Moment from 'moment'

export default {
  name: 'Class',
  data () {
    return {
      isadd: false,
      visible: false,
      confirmLoading: false,
      count: 0,
      columns: [
        {
          title: 'ID',
          width: 150,
          align: 'center',
          dataIndex: 'id',
          scopedSlots: {
            customRender: 'id'
          }
        },
        {
          title: '分类',
          align: 'center',
          dataIndex: 'class_name',
          scopedSlots: {
            customRender: 'class_name'
          }
        },
        {
          title: '文章标题',
          align: 'center',
          dataIndex: 'title',
          scopedSlots: {
            customRender: 'title'
          }
        },
        {
          title: '文章内容',
          align: 'center',
          width: 500,
          dataIndex: 'content',
          scopedSlots: {
            customRender: 'content'
          }
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'create_at',
          scopedSlots: {
            customRender: 'create_at'
          }
        },
        {
          title: '修改时间',
          align: 'center',
          dataIndex: 'update_at',
          scopedSlots: {
            customRender: 'update_at'
          }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: {
            customRender: 'active'
          }
        }
      ],
      pagination: {
        pageSize: 15,
        page: 1
      },
      loading: false,
      classList: []
    }
  },

  computed: {},
  created () {
    this.getArticleList(1, 15)
  },
  mounted () {},
  methods: {
    // 删除文章
    delArticle (id) {
      delArticle({
        id: id
      })
        .then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getArticleList(1, 15)
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    handleTableChange (pagination, filters) {
      // console.log(pagination)
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        ...filters
      })
    },
    fetch (params = {}) {
      // console.log('params:', params)
      this.loading = true
      this.getArticleList(params.page, 15)
    },
    handleCancel () {
      this.visible = false
      this.form = this.$options.data().form
    },
    openmodal (val) {
      if (val === '') {
        this.$router.push({
          path: '/admin/article/addarticle'
        })
      } else {
        this.$router.push({
          path: '/admin/article/addarticle',
          query: {
            item: JSON.stringify(val)
          }
        })
      }
    },

    // 获取分类列表
    getArticleList (page, pagesize) {
      this.loading = true
      getArticleList({
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('文章列表返回', res)
            this.classList = res.data.data
            this.count = res.data.count
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          } else {
            this.$message.info(res.msg)
            this.loading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.display {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: right;
  margin-bottom: 10px;
}

.class_table {
  .coupon_a {
    display: block;
    font-size: 0;
    cursor: pointer;
    margin-top: 1px;

    span {
      display: inline-block;
      padding: 0 5px;
      background: #fd7100;
      color: #fff;
      font-size: 12px;
      background: linear-gradient(0deg, rgba(255, 75, 66, 1), rgba(255, 117, 60, 1));
      height: 20px;
      vertical-align: middle;
      line-height: 20px;
    }

    em {
      display: inline-block;
      padding: 0 8px;
      border: 1px solid #fd7100;
      color: #fd7100;
      font-size: 12px;
      height: 20px;
      vertical-align: middle;
      line-height: 18px;
    }
  }

  .goodsurl {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    background-color: #fff;
    margin-left: 10px;
    color: #000;
    font-size: 18px;
    // font-weight: bolder;
    text-align: center;
    border-radius: 50%;
    // padding: 5px;
    color: gray;
    cursor: pointer;
    border: 1px solid gray;
  }
  .ant-table-row:hover {
    .goodsurl {
      background-color: orange;
      color: #fff;
      // font-weight: bolder;
      border: none;
    }

    .quan {
      background-color: red;
    }
  }
}
</style>
